前端基础_CSS

CSS 书写语法

• 内部与外部样式

选择器 {
    样式1;  // 属性: 值; width: 300px
    样式2;
}

• 内联样式

<div style="样式1;样式2"></div>   // width: 300px

CSS 基础选择器

• ID选择器

#id{ }

• class选择器

.cls{ }

• 元素选择器

div{ }
div.cls{ }

以上三种基本选择器可以拼接在一起，匹配更准确 例如：div.cls{ }
选择器的作用：匹配HTML元素

CSS 高级选择器

• 组合选择器

element,element{ }

• 通配符选择器

*{ }

• 后代选择器

pElement subElement{ }

• 子元素选择器

pElem > subElem{ }

• 相邻兄弟选择器

div + a{ }    // 选择div后面相邻的a标签

• 属性选择器

[attribute]{ }
element[attribute]{ }
element[attribute=value]{ }

• 伪类选择器

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */
p:first-child { }

• 伪元素选择器

div::after{ content:"" }
div::before{ content:"" }

CSS 优先级

内部样式和外部样式合并

!important > 行间样式 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/伪元素选择器 > 通配符选择器

.cls{}      //0-0-0-1-0
#id{}       //0-0-1-0-0
div.cls{}   //0-0-0-1-1

CSS 常用样式

• 文字

字体：font-family: "Times New Roman", Times, serif;
颜色：color: red;
字体大小：font-size: 40px;
字体粗细：font-weight: 900;
字体样式：font-style：italic;

• 盒子

外边距：margin：15px;
内边距：padding: 20px;
边框： border: 1px solid #999;
宽： width: 500px;
高： height: 400px;

• 背景

集成属性写法：
background: #0079D2 url(img/jt.jpg) no-repeat fixed 50% 20%;

单个属性写法：
背景图大小：background-size:80px 60px; 
背景颜色：background-color:yellow;
背景图位置：background-position:center; 
背景图重复：background-repeat：no-repeat;
背景图：background-image:url('paper.gif');

• 行高

line-height: 30px;     // 文字居中使用  取值可以是%，数值，像素

• 显示与隐藏

1、display
隐藏样式：display:none;
显示样式：display:非none的其它值

2、visibility
隐藏：visibility:hidden;
显示：visibility:visible;

• 定位

position

取值：absolute、relative、fixed

1、绝对定位

CSS 布局

• html标签分类

块级元素（block）
1、可以设置宽、高，不设置宽度，默认100%
2、独占一行
3、块级元素可以嵌套块级元素和行内元素

行内元素（inline）
1、行内元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
2、不支持设置宽、高，其宽和高随元素的内容而变化
3、行内元素只能嵌套行内元素，不能嵌套块级元素和行内块元素

行内块元素（inline-block）
1、可以设置宽、高
2、行内元素不会独占一行
3、块级元素可以嵌套块级元素和行内元素

• 布局种类

1、table 表格布局
2、float 浮动布局 （重点）
3、inline-block布局
4、flexbox 布局  （现在布局方式）

• float 浮动布局

容器需要清浮动，子元素需要浮动（float: left/right;）

/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";}
.clearfloat{zoom:1}    /*可解决ie6,ie7浮动问题*/